<template>
	<div id="loginContainer" style="">

			<section style="position: relative;z-index: 2;width: 84%;margin: 12rem auto;">
				<section style="width: 100%;height: 2.6rem;display: flex;align-items: center;">
  					<mu-select-field v-model="school" fullWidth :underlineShow="false"  style="text-align: left;margin-top: 0.8rem;">
					    <mu-menu-item v-for="text,index in schoolList" :key="index" :value="text" :title="text.name" />
					</mu-select-field>  
  				</section>
				<section class="login-frame center-mid" >
					<label style="line-height: 3rem;">账号</label>
					<input type="text" placeholder="请输入用户名" v-model="username"  />
				</section>
				<section class="login-frame center-mid" >
					<label style="line-height: 3rem;">密码</label>
					<input type="password" placeholder="请输入密码" v-model="password"  />
				</section>
				
				<mu-flat-button class="mu-loginBtn" labelClass="mu-label" label="登录" @click="login" />
				</mu-flat-button>
			</section>
			<section class="login-fixed" >
				<img id="loginBg" :src="bg" style="width:100%;height: 100%;" />
			</section>
		<!--<TopNav style="position: relative;z-index: 50;"></TopNav>-->
		<!--<section class="login-fixed" >
			<img id="loginBg" :src="bg" style="position: relative;z-index: 5;"/>
		</section>-->
		<!--<section class="headIcon">
			
		</section>-->
		
	</div>
</template>

<script>

	export default{
		data(){
			return{
				bg:'static/images/gsbg7.png',
				username:'',
		      	password:'',
		      	school:{},
				schoolList:[
					{
						id:'1',
						name:'山东华创学院',
						url:'http://localhost/test'
					},
					{
						id:'2',
						name:'山东政法学院',
						url:'http://localhost/test'	
					},
					{
						id:'3',
						name:'山东财经大学',
						url:'http://localhost/test'	
					},
					{
						id:'4',
						name:'滨州职业学院',
						url:'http://localhost/test'	
					},
				],
			}
		},
		computed:{
		loadCoureInfoUrl(){
			return `${this.$store.state.schoolUrl}/course/${new Date().format("yyyy-MM-dd")}/${this.$store.state.userInfo.studentClassId}/ClassDayCourse`
		},
		academicDateUrl(){
			return `${this.$store.state.schoolUrl}/courseDate/getDayInfo/${new Date().format("yyyy-MM-dd")}`
		},
	},
		mounted(){
			let Height=this.$publicData.getHeight()
			var loginContainer=document.querySelector("#loginContainer")
			var loginBg=document.querySelector("#loginBg")
			loginContainer.style.height=`${Height}px`
			loginBg.style.width=`${this.$publicData.getWidth()}px`
			this.getAcademicDate()
			
		},
		 methods: {
		 	 	login(){
	    		let that = this
	    		that.axios.post(`${that.school.url}/Login/phoneLogin`,{
	    			"uid":that.username,
	    			"password":that.password
	    		}).then(function (response) {
	           	if(response.data.erroInfo=='success'){
	           		localStorage.token=response.data.token
	           		localStorage.schoolUrl=that.school.url
	           		localStorage.username=response.data.uid
	           		localStorage.className=response.data.classId
//	           		localStorage.className=response.data
	           		that.$store.commit('getInfo',
	 						{token:response.data.token,
	 						schoolUrl:that.school.url,
	 						loginUrl: 'login',
	 						loginType:'usernameAndPasswordlogin'})
	           		
	           	if(response.data.userRole=='studentIndex'){
	      			that.$store.commit('getUserInfo',
	      			{'userInfo':response.data.studentInfo,
	      			 'userRole':response.data.userRole,
	      			 'MenuList':response.data.MenuList
	      			})
	      		}else{
	      			that.$store.commit('getUserInfo',
	      			{'userInfo':response.data.teacherInfo,
	      			 'userRole':response.data.userRole,
	      			 'MenuList':response.data.MenuList
	      			})
	      	}
	      	that.loadCoureInfo()
	           			
	           		}else if(response.data.erroInfo=='账号或密码不正确'){
	           			that.showToast('账号或密码不正确')
	           		}
	  	       }).catch(function(response){
	  	       			that.showToast('连接超时请检查连接')
	  	       })
	    	},
		   		//获取今天的课程
  			loadCoureInfo(){
  			let that = this
	      	that.axios.get(that.loadCoureInfoUrl).then(function (response) {
	      		that.$store.commit('getCoureInfo',response.data)
	      		console.log(that.$store.state.todayCourse)
	      		setTimeout(function(){
	           			that.$router.push(that.$store.state.userRole)
	           		},1480)
	      	}).catch(function (error) {
	        	console.log(error);
	      	});
  		},
  				//获取公共学年学期 和教学周
  		getAcademicDate(data){
  			let that=this
  			that.axios.get(that.academicDateUrl).then(function(response){
					 console.log(response.data)
					 let myDate=new Date()
					 let week=['日','一','二','三','四','五','六']
					 let month=(myDate.getMonth()+1)+'-'+myDate.getDate()
					 let teachDateInfo= {
					 	'academic':response.data.courseAcademicYear,
					 	'semester':response.data.courseAcademicTerm,
					 	'teachWeek':response.data.courseWhichWeek,
					 	'weekDay':`周${week[myDate.getDay()]}`,
					 	'month':new Date().format("yyyy-MM-dd")
					 }
				that.$store.commit('getTeachDateInfo',teachDateInfo)
				console.log(that.$store.state.teachDateInfo)
					 
  			})
  		},
		 }
	}
</script>

<style scoped>
	
.title-span{
	flex: 5;
	text-align: center;
	font-size: 1.1rem;
}
.selfToast-container{
 	position:fixed; 
 	width: 100%;
 	height: 100%; 
 	background-color: rgba(0,0,0,0);
 	z-index: 200;
 	left: 0; 
 	top: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 .selfToast{
 	height: 2.6rem;
 	line-height: 2.6rem;
 	background-color: #757575 !important;
 	text-align: center;
 	padding: 0 1rem;
    border-radius:5px !important;
    color: #fff;
 }
 .fade-enter-active,.fade-leave-active{
 	transition: all 0.6s ease-in-out
 }
 .fade-enter-active{
 	opacity: 1;
 }
 .fade-leave-active{
 	opacity: 0;
 }
 .fade-enter,.fade-leave{
 	opacity: 0;
 }	
input[placeholder]{
	color: #989898 !important;
}
ul li{
	list-style: none;
}
.loginUpd-container{
	position: relative;
	z-index: 120; 
	margin: 1rem auto 0 auto;  
	width: 90%;
}
.login-logo{
	width: 5rem; 
	height: 5rem; 
	border-radius: 50%; 
	overflow: hidden; 
	/*border:2px solid white*/
}
.login-logo-title{
	color: #fff;
	line-height: 1.8rem;
}
.login-logo-title:nth-child(2){
	margin-top: 0.4rem 
}
.login-strip{
	display: flex; 
	flex-direction: row; 
	border-bottom: 1px solid #fff; 
	font-size: 1.1rem;
	margin-top: 1rem;
}
.login-frame{
	background-color: #fff;
	display: flex; 
	flex-direction: row; 
	font-size: 1rem;
	padding: 2px 0;
	font-family: "微软雅黑";
}
.login-frame:nth-child(1){
	border-bottom: 1px solid #b5b3be;
}

.login-strip input{
	flex: 6; 
	height: 3rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:#fff;
	color:#fff
}


.login-frame label{
	flex: 1.2; 
	color: #9e9e9e;
	text-align: center;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px white inset;
/*border: 1px solid #CCC!important;*/
}
.login-frame label{
	color:#989898
}
.login-frame input{
	flex: 6; 
	height: 3rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:#3b3b3b;
	color:#3b3b3b !important;
	 /*-webkit-box-shadow: 0 0 0 0.8rem #fff inset;*/
}
.btn-loginUpd{
	color: white;
	line-height: 3rem;
	border-radius: 3px;
	height: 3rem;
	background-color: #3399fe;
	width: 100%;
	border: none;
	margin-top: 3rem;
	font-size: 1rem;
	outline: none;
}
.mu-loginBtn{
	color: white !important;
	border-radius: 3px !important;
	height: 3rem !important;
	background-color: #3399fe !important;
	width: 100%;
	margin-top: 2rem !important;

}
span.mu-flat-button-label.mu-label{
	font-size: 1rem;
}
/*.login-strip input::-webkit-input-placeholder { 
    color:   #fff;
}*/
 .swiper-box {
    width: 78%;
    height: 2.6rem;
    /*margin: 0 auto;*/
   margin: 0;
  }
  .swiper-item {
    height: 2.6rem;
    margin: 0;
    padding: 0;
    text-align: center;
    /*font-size: 18px ;*/
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .login-swiper-info{
  		width: 80%; 
  		height: 2.6rem; 
  		text-align: left;
  		display:block;
  		/*margin:0 5% 0 5%;*/
  		line-height: 2.6rem;
  		z-index:240;
  		position: relative;
  }
  .auto-ellipsis{
  	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  .login-icon-right{
  	 width: 10%; 
  	 height: 2.6rem; 
  	 background:#fff;
  	 display: flex;
  }
  .top-swiper-container{
  	height: 2.6rem; 
  	width: 100%; 
  	background: #fff; 
  	margin: 0;
  	display: flex; 
  	flex-direction: row;
  	position: relative;
  	z-index: 150;
  	color: #3b3b3b;
  	font-size: 0.8rem;
  }
  .top-slidedown{
  	 width: 100%;
  	 position: absolute;
  	 left: 0;
  	 top:2.6rem; 
  	 background-color: #fff; 
  	 z-index: 150;
  }
  .top-slidedown ul li{
  	line-height: 1.6rem;
  }
  .top-slidedown ul li:nth-child(1){
  	 margin-top: 0.8rem;
  }

 .swiper-wrapper{
  	border-left: 1px solid #fff !important;
  }
  .login-notice-icon{
  	  width: 8%;
  	  height: 2.6rem; 
  	  background:#fff; 
  	  display: flex; 
  	  color: #2799f3;
  }
  .demo-popup-right{
	  display: flex;
	  width: 100%;
	  height: 100%;
	  align-items: center;
  }
  .top-close{
  	position: fixed;
	z-index: 202;
	top: 0;
	left: 0;
	width: 100%; 
	height: 3rem; 
	background: white; 
	display: flex; 
	flex-direction: row; 
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 4px rgba(202,202,202,0.2);
  }
  .swiper-first{
  	background-color: hotpink;
  	position: absolute;
  	top: 2.6rem;
  	left: 0;
  	z-index: 99;
  }
  .notReal-first{
  
  }
  .notice-list-container{
  	position:absolute;
  	width: 100%; 
  	height: 100%; 
  	background: #fff;
  	top: 0; 
  	left: 0;
  	z-index: 200;
  }
  .mu-toast{
    background-color: #757575 !important;
    /*top:50%;*/
    text-align: center;
    top: 50% !important;
    width: auto;
    left: 50%;
    padding: 0 1rem!important;
    /*width:38% !important;*/
    border-radius:5px !important;
    /*left: 31.5% !important;*/
  }
  .login-fixed{
  	position:fixed;
  	width: 100%;
  	height: 100%;
  	left: 0;
  	top: 0;
  	z-index: 0;
  }
  /*.swiper-item:nth-last-child(1){
  	background-color: sandybrown;
  	position: relative;
  	z-index: 300;
  }*/
</style>